<template>
	<view>
		<view class="pd-v-lg lay-c-c head-title bk-white">
			<text>{{raceName}}</text>
		</view>
		
		<!-- <view class="bk-white">
			<view class="lay-fs-c pd-h-md pd-b-md">
				<view>比赛地点：<text class="orange">{{raceAddress}}</text></view>
			</view>
			<view class="lay-fs-c pd-h-md">
				<view>比赛时间：<text class="orange">{{raceTime}}</text></view>
			</view>
			
			<view v-if="raceSignInStatus" class="mg-v-lg lay-c-c pd-md">
				<button v-if="mySignInState==0" class="btn round bk-orange white" style="width: 160rpx; height: 160rpx;" @click="onTapSignIn">签到</button>
				<button v-else class="btn round bk-green white" style="width: 160rpx; height: 160rpx;">已签到</button>
			</view>
			<view v-else class="mg-v-lg lay-c-c pd-md">
				<button v-if="mySignInState==1" class="btn round bk-green white" style="width: 160rpx; height: 160rpx;">已签到</button>
				<button v-else class="btn round bk-orange white" style="width: 160rpx; height: 160rpx;">管理员还未开启签到</button>
			</view>
		</view> -->
		
		<view v-for="(round, roundIdx) in rounds" :key="roundIdx">
			<view class="bk-white mg-t-lg">
				<view class="title pd-md lay-c-c">第{{round.round}}场</view>
				<!-- <view class="lay-fs-c">
					<view class="pd-md">抽签时间：</view>
					<view>{{round.drawLotsStartTime + " ~ " + round.startTime}}</view>
				</view>
				<view class="lay-fs-c">
					<view class="pd-md">比赛时间：</view>
					<view v-if="round.startTime && round.endTime">{{round.startTime + " ~ " + round.endTime}}</view>
					<view v-else>""</view>
				</view> -->
				<!-- <view v-if="round.myDrawLotResult" class="lay-fs-c">
					<view class="pd-md">抽签结果：</view>
					<view>{{round.myDrawLotResult}}</view>
				</view> -->
				<view v-if="round.raceRoundStatus >= 2 && round.myDrawLotState > 0" class="lay-c-c">
					<view class="pd-md">抽签结1果：</view>
					<view>{{round.myDrawLotResult}}</view>
					<view v-if="round.myDrawLotState == 2">【系统代抽】</view>
					<view v-else></view>
				</view>
				<view v-else class="lay-c-c">
					<text v-if="round.drawLotsStatus == 0" class="title">抽签尚未开启</text>
					<view v-else-if="round.myDrawLotState == 1"><view class="pd-md">抽签结2果：</view><view>{{round.myDrawLotResult}}</view></view>
					<button v-else class="btn bk-green white flex1" @click="onTapDrawLots(round.round)">一键抽签</button>
				</view>
			</view>
			
			<!--
			<view class="mg-md" v-if="myDrawLotsResults.length > roundIdx">
				<view>抽签结果</view>
				<view v-for="(item,index) in myDrawLotsResults" :key="index">
					<view class="lay-sb-c-c bk-white-gray">
						<view>{{item.nickname}}</view>
						<view>第{{item.nickname}}场</view>
					</view>
					<view class="mg-t-md pd-md">
						钓位: <text class="green">{{item.partition}}</text>区<text class="orange">{{item.seat_no}}</text>号
					</view>
					<view class="mg-t-md pd-md">
						成绩: {{item.score}}
					</view>
				</view>
			</view>
			-->
		</view>
		
		<view class="pd-md">
			<view class="red mg-h-sm">温馨提示</view>
			<view class="mg-h-sm">1. 每场比赛开始后，点击“一键抽签”按钮抽取钓位。</view>
			<view class="mg-h-sm">2. 自己没有完成抽签的，由系统自动抽签。</view>
		</view>
		
		<!-- 抽签模态窗口 -->
		<view class="cu-modal" :class="showModal?'show':''">
			<view class="cu-dialog pd-lg">
				<view>
					<view style="height: 35px; overflow: hidden">
						<view v-if="promptText" class="lay-c-c" style="height: 30px;">
							<text>{{promptText}}</text>
						</view>
						<view v-else :class="{rolling: startAnimation}">
							<block v-for="(item, index) in drawLotItems" :key="index">
								<view class="lay-c-c" style="height: 30px;">
									<view class="group-title"><text>{{item.pond_code}}</text>  -  <text>{{item.seat_no}}号</text></view>
								</view>
							</block>
						</view>
					</view>
					
					<view class="lay-c-c pd-lg">
						<button class="btn bk-red white" :loading="btnLoading" :disabled="btnDisabled" @click="doDrawLots">{{drawLotsBtnLabel}}</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getRaceForDrawLots,
		signIn,
		prepairDrawLottery,
		submitDrawLottery
	} from '@/api/fsh.js';
	import {MyTip} from '../../components/ssty/common.js';
	export default {
		data() {
			return {
				raceName: '',
				raceAddress: '',
				raceTime: '',
				pond_code: '00',
				seat_no: '00',
				drawLotsBtnLabel: '开始抽签',
				mySignInState: 0,
				raceSignInStatus: 0,		// 比赛签到状态：0-未开启，1-开启签到
				rounds: [{
					round: 1, 				// 第几场，以1为基数
					drawLotsStatus: 0, 		// 抽签开放状态: 0-抽签关闭 1-抽签开放
					myDrawLotsState: 0,		// 我是否已抽签：0-未抽签，1-已抽签
					drawLotsStartTime: '',	// 抽签开始时间
					startTime: '08:00',		// 比赛开始时间
					endTime: '12:00',		// 比赛结束时间
					myDrawLotState: 0,		// 当前用户是否已抽签
					myDrawLotResult: ''		// 抽签结果
				}],	
				
				showModal: false,
				btnLoading: false,
				btnDisabled: false,
				
				drawLotItems: [
					{pond_code: '1', seat_no: '1'},
				],
				
				startAnimation: false,
				promptText: '',
			}
		},
		onLoad(options) {
			console.log("draw_lots| onLoad, options:", options);
			this.raceId = options.raceId;
			this.drawLotItems = [];
			getRaceForDrawLots(options.raceId).then(res => {
				console.log("draw_lots| onLoad, get:", res.entity);
				this.raceName = res.entity.race.raceName;
				this.raceAddress = res.entity.race.merAddress;
				this.raceTime = res.entity.race.raceStartTime + " ~ " + res.entity.race.raceEndTime;
				this.raceSignInStatus = res.entity.race.signInStatus;
				this.rounds = res.entity.rounds;
				
				this.mySignInState = res.entity.mySignInState;
			}).catch(err => {res.entity.rounds
			});
		},
		methods: {
			onTapSignIn() {
				signIn(this.raceId).then(res=>{
					this.mySignInState = 1;
				}).catch(err=>{
					console.log("signIn fail:", err);
				})
			},
			
			onTapDrawLots(round) {
				uni.showLoading({
					title: '准备抽签...'
				});
				this.startAnimation = false;
				
				prepairDrawLottery(this.raceId, round).then(res=>{ // race.js pub_prepairDrawLottery
					this.showModal = true;
					
					// 因为每一项固定高30px，@keyframes设置摇号结果y坐标对应第50行，
					// 所以要把结果设置到第50行
					let seats = res.entity.seatList;
					if(seats.length == 1) {
						this.promptText = "只剩下一个钓位了";
						this.drawLotsBtnLabel = '确定';
					}
					else {
						this.promptText = "还有"+seats.length+"个钓位可供抽取";
					}
					for(let i = 0; i < 50; i++) {
						if(seats.length < 50) {
							seats = seats.concat(seats);
							continue;
						}
						break;
					}
					seats.splice(49);
					seats.push(res.entity.userDrawLotRet);
					this.drawLotItems = seats;
					console.log("drawLotItems", this.drawLotItems);
					
					this._curRound = round;
					this._myDrawLotResult = res.entity.myDrawLotResult;
					
					setTimeout(()=>{
						uni.hideLoading();
					}, 1000);
				}).catch(err=>{
					uni.hideLoading();
					console.log("drawLottery fail:", err);
					MyTip(err.msg, 2500);
				})
			},
			doDrawLots() {
				if(this.drawLotsBtnLabel == '开始抽签') {
					this.btnLoading = true;
					this.btnDisabled = true;
					this.startAnimation = true;
					this.promptText = "";
					
					setTimeout(()=>{
						submitDrawLottery(this.raceId, this._curRound).then(res=>{ // race.js pub_submitDrawLottery
						}).catch(err=>{
							console.log("submitDrawLottery fail:", err);
						})
					}, 2000);
					
					setTimeout(()=>{
						this.btnLoading = false;
						this.btnDisabled = false;
						this.drawLotsBtnLabel = '确定';
					}, 5500);
				}
				else {
					this.rounds[this._curRound-1].myDrawLotState = 1;
					this.rounds[this._curRound-1].myDrawLotResult = this._myDrawLotResult;
					
					submitDrawLottery(this.raceId, this._curRound).then(res=>{ // race.js pub_submitDrawLottery
						this.showModal = false;
						this.drawLotsBtnLabel = '开始抽签';
					}).catch(err=>{
						console.log("submitDrawLottery fail:", err);
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/leui.scss";
	
	page {
		height: 100%;
		background-color: #f5f5f5;
	}
	
	.rolling {
		animation-name: rolling;
		animation-duration: 6s;
		animation-fill-mode: forwards;
	}
	 
	@keyframes rolling
	{
	    to { transform: translateY(-1470px); }
	}
</style>
